<script setup lang="ts">
// 视频详情页面
import { ref } from 'vue'
import { onMounted } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import { ElRow, ElCol, ElCard, ElImage, ElButton, ElSkeleton, ElIcon, ElDrawer } from 'element-plus'
import { VideoPlay, VideoPause, Star, StarFilled, Share, Download, CaretBottom } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 视频详情数据
const videoDetail = ref({
  id: 1,
  title: 'Vue 3实战教程 - 从入门到精通',
  cover: 'https://picsum.photos/800/450?random=1',
  videoUrl: 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4',
  duration: '1:25:30',
  views: '128000',
  likes: '15000',
  author: {
    id: 101,
    name: '前端小智',
    avatar: 'https://picsum.photos/50/50?random=101',
    followers: '25000'
  },
  publishTime: '2023-05-15',
  description: '本视频详细介绍了Vue 3的核心概念和实战技巧，从基础语法到高级特性，帮助你快速掌握Vue 3开发。内容包括Composition API、响应式系统、组件通信、状态管理等。',
  tags: ['Vue 3', '前端开发', 'JavaScript', '框架']
})

// 相关视频推荐
const relatedVideos = ref([
  {
    id: 2,
    title: 'Element Plus组件详解',
    cover: 'https://picsum.photos/300/200?random=2',
    duration: '45:20',
    views: '85000',
    author: 'UI设计师'
  },
  {
    id: 3,
    title: 'Pinia状态管理实战',
    cover: 'https://picsum.photos/300/200?random=3',
    duration: '38:45',
    views: '63000',
    author: '状态管理师'
  },
  {
    id: 4,
    title: 'Vue Router 4深度解析',
    cover: 'https://picsum.photos/300/200?random=4',
    duration: '52:10',
    views: '97000',
    author: '路由专家'
  },
  {
    id: 5,
    title: 'Vue 3性能优化技巧',
    cover: 'https://picsum.photos/300/200?random=5',
    duration: '31:15',
    views: '152000',
    author: '性能优化师'
  }
])

// 控制状态
const isLiked = ref(false)
const isFollowing = ref(false)
const drawerVisible = ref(false)

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

// 点赞/取消点赞
const toggleLike = () => {
  isLiked.value = !isLiked.value
}

// 关注/取消关注
const toggleFollow = () => {
  isFollowing.value = !isFollowing.value
}

// 播放视频
const playVideo = () => {
  router.push(`/player/${videoDetail.value.id}`)
}

// 分享视频
const shareVideo = () => {
  drawerVisible.value = true
}

onMounted(() => {
  // 可以在这里通过route.params.id获取视频ID并请求详情数据
  console.log('视频ID:', route.params.id)
})
</script>

<template>
  <div class="video-detail-container">
    <el-row :gutter="20">
      <!-- 左侧主要内容 -->
      <el-col :xs="24" :sm="24" :md="16" :lg="16">
        <!-- 视频播放器占位 -->
        <div class="video-player-placeholder">
          <div class="player-container">
            <el-image 
              :src="videoDetail.cover" 
              class="video-cover"
              fit="cover"
              alt="视频封面"
            />
            <div class="play-overlay" @click="playVideo">
              <el-icon class="play-icon"><VideoPlay /></el-icon>
              <span class="play-text">点击播放</span>
            </div>
          </div>
          <div class="video-duration">{{ videoDetail.duration }}</div>
        </div>
        
        <!-- 视频标题 -->
        <h1 class="video-title">{{ videoDetail.title }}</h1>
        
        <!-- 视频信息 -->
        <div class="video-meta">
          <div class="meta-info">
            <span class="views">{{ formatNumber(Number(videoDetail.views)) }} 次观看</span>
            <span class="publish-time">{{ videoDetail.publishTime }} 发布</span>
          </div>
          
          <div class="video-actions">
            <el-button 
              :icon="isLiked ? StarFilled : Star" 
              :type="isLiked ? 'primary' : 'default'"
              @click="toggleLike"
            >
              {{ formatNumber(Number(videoDetail.likes)) }}
            </el-button>
            <el-button icon="Share" @click="shareVideo">分享</el-button>
            <el-button icon="Download">下载</el-button>
          </div>
        </div>
        
        <!-- 作者信息 -->
        <el-card class="author-card">
          <el-row :gutter="15">
            <el-col :span="2">
              <el-image 
                :src="videoDetail.author.avatar" 
                class="author-avatar"
                fit="cover"
              />
            </el-col>
            <el-col :span="16">
              <div class="author-info">
                <h3 class="author-name">{{ videoDetail.author.name }}</h3>
                <p class="author-followers">{{ formatNumber(Number(videoDetail.author.followers)) }} 粉丝</p>
              </div>
            </el-col>
            <el-col :span="6" class="follow-col">
              <el-button 
                :type="isFollowing ? 'default' : 'primary'"
                @click="toggleFollow"
              >
                {{ isFollowing ? '已关注' : '关注' }}
              </el-button>
            </el-col>
          </el-row>
          
          <div class="video-description">
            <p>{{ videoDetail.description }}</p>
            <div class="video-tags">
              <el-tag 
                v-for="(tag, index) in videoDetail.tags" 
                :key="index" 
                class="tag-item"
              >
                {{ tag }}
              </el-tag>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧推荐列表 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <div class="related-videos">
          <h3 class="related-title">相关推荐</h3>
          <div 
            v-for="video in relatedVideos" 
            :key="video.id" 
            class="related-video-item"
            @click="$router.push(`/video/${video.id}`)"
          >
            <el-row :gutter="10">
              <el-col :span="10">
                <div class="related-video-cover">
                  <el-image 
                    :src="video.cover" 
                    class="cover-img"
                    fit="cover"
                    alt="视频封面"
                  />
                  <div class="related-duration">{{ video.duration }}</div>
                </div>
              </el-col>
              <el-col :span="14">
                <div class="related-video-info">
                  <h4 class="related-video-title" :title="video.title">{{ video.title }}</h4>
                  <p class="related-video-author">{{ video.author }}</p>
                  <p class="related-video-views">{{ formatNumber(Number(video.views)) }} 次观看</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    
    <!-- 分享抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="分享视频"
      direction="btt"
      size="30%"
    >
      <div class="share-content">
        <p class="share-title">将视频分享给朋友</p>
        <div class="share-options">
          <div class="share-option">
            <el-button type="primary" plain icon="Link">复制链接</el-button>
          </div>
          <div class="share-option">
            <el-button type="success" plain icon="ChatLineRound">微信</el-button>
          </div>
          <div class="share-option">
            <el-button type="info" plain icon="Share">微博</el-button>
          </div>
          <div class="share-option">
            <el-button type="warning" plain icon="ChatRound">QQ</el-button>
          </div>
        </div>
        <div class="share-url">
          <el-input 
            :value="`https://example.com/video/${videoDetail.id}`" 
            readonly
          >
            <template #append>
              <el-button>复制</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
.video-detail-container {
  padding: 20px;
}

.video-player-placeholder {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
}

.player-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-cover {
  width: 100%;
  height: 100%;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.video-player-placeholder:hover .play-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 48px;
  color: white;
  margin-bottom: 10px;
}

.play-text {
  color: white;
  font-size: 16px;
}

.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.video-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.meta-info {
  display: flex;
  gap: 15px;
}

.views, .publish-time {
  color: #909399;
}

.video-actions {
  display: flex;
  gap: 10px;
}

.author-card {
  margin-bottom: 20px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.author-info {
  padding-top: 5px;
}

.author-name {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
}

.author-followers {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.follow-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.video-description {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #ebeef5;
}

.video-tags {
  margin-top: 10px;
}

.tag-item {
  margin-right: 8px;
}

.related-title {
  font-size: 18px;
  margin-bottom: 15px;
}

.related-video-item {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.related-video-item:hover {
  background-color: #f5f7fa;
}

.related-video-cover {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
}

.cover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.related-duration {
  position: absolute;
  bottom: 3px;
  right: 3px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 1px 4px;
  border-radius: 2px;
  font-size: 10px;
}

.related-video-info {
  padding-top: 5px;
}

.related-video-title {
  margin: 0 0 5px 0;
  font-size: 14px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-video-author,
.related-video-views {
  margin: 0 0 3px 0;
  font-size: 12px;
  color: #909399;
}

.share-content {
  padding: 20px;
}

.share-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.share-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.share-option {
  text-align: center;
}

.share-url {
  margin-top: 20px;
}
</style>